<!-- 
*
* 侧边栏
*
*
 -->
 <template>
    <div class="sidebar-info">
        <div class="info-card shadow-box">
            <div class="info-avatar">
                <el-avatar 
                shape="square" 
                :size="280" 
                :src="ENV_VITE_APP_URL+(token&&avatar ? avatar : webAvatar)"
                fit="cover"/>
                <div class="avatar-dim"></div>
            </div>
            <div class="info-container">
                <div class="info-user">
                    <div class="name">{{ token ? nickname : name }}</div>
                    <div class="subtitle">{{ token&&slogan ? slogan : webSlogan }}</div>
                </div>
                <div class="info" v-if="token">
                    <div class="blog-info-item">
                        <span>点赞</span>
                        <span class="blog-info-num">{{ likesCount }}</span>
                    </div>
                    <div class="blog-info-item">
                        <span>评论</span>
                        <span class="blog-info-num">{{ commentsCount }}</span>
                    </div>
                    <div class="blog-info-item">
                        <span>弹幕</span>
                        <span class="blog-info-num">{{ danmuCount }}</span>
                    </div>
                </div>
                <div class="info" v-else>
                    <div class="blog-info-item">
                        <span>文章</span>
                        <span class="blog-info-num">{{ articleCount }}</span>
                    </div>
                    <div class="blog-info-item">
                        <span>评论</span>
                        <span class="blog-info-num">{{ webLikesCount }}</span>
                    </div>
                    <div class="blog-info-item">
                        <span>留言</span>
                        <span class="blog-info-num">{{ messageCount }}</span>
                    </div>
                </div>
                <MusicControl></MusicControl>
            </div>
        </div>
    </div>
</template>

<script setup>
import MusicControl from '../music-control/music-control.vue';
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/store/system/user';
import { websiteStore } from '@/store/system/website';
const { token, nickname, slogan, avatar, likesCount, commentsCount, danmuCount } = storeToRefs(useUserStore());
const { webAvatar, name, webSlogan, articleCount, webLikesCount, messageCount } = storeToRefs(websiteStore());
import { ENV_VITE_APP_URL } from '@/constants/common-const';
import { systemApi } from '@/api/system/system-api';

// ========================= 实列挂载之前调用 =========================
// 数据初始化
onBeforeMount(async () => {
    if(name.value!=='') return;
    await websiteStore().getWebInfo();
    getWebCount();
});

// ========================= 获取统计 =========================
async function getWebCount() {
    const res = await systemApi.count();
    websiteStore().setWebCountInfo(res.data);
}

</script>

<style lang="scss" scoped>
    @import '@/theme/public.scss';
    @import './blog-info-sidbar.scss';
</style>